<template>
  <div>
    <a-card>编辑分组权限</a-card>
    <a-card class="content">
      <div style="width: 60%; margin-bottom: 30px">
        <Common ref="checkbox" :id="id" />
      </div>
      <a-button type="primary" @click="onSubmit">确定</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-card>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, watch } from "vue";
import { CheckboxGroup, message } from "ant-design-vue";
//api
import { assignPermissions, removePermissions } from "@/api/api.js";
import Common from "./common.vue";
import { useRoute } from "vue-router";
export default {
  emits: ["changeList"],
  components: { Common },
  setup() {
    let route = useRoute();
    let id = route.query.id;
    const checkbox = ref(null);
    const state = reactive({
      data: [],
      id: id,
      key: "",
      len: "",
      isFirst: true,
    });
    const formState = reactive({
      group_id: "",
      permission_ids: [],
    });
    const getList = async () => {
      // console.log(id);
      // console.log(res);
    };
    // const checkbox = ref(null);
    const onSubmit = async () => {
      // state.key = "stop";
      let checkedData = checkbox.value.checkedList;
      let checkedData1 = checkbox.value.checkedList1;
      formState.permission_ids = [...checkedData, ...checkedData1];
      formState.group_id = id;
      let res;
      console.log(state.len);
      // if (state.len > formState.permission_ids.length) {
      //   res = await removePermissions(formState);
      // } else {
      //   res = await assignPermissions(formState);
      // }
      state.len = formState.permission_ids.length;
      state.isFirst = false;
      if (res) {
        message.success(res.data.message);
      }
    };
    const resetForm = () => {
      formState.name = "";
      formState.info = "";
      // checkbox.value.resetForm();
    };
    onMounted(() => {
      getList();

      //需要获取最开始的state.len
      state.len = 4;
      // checkbox.value.checkedList.length + checkbox.value.checkedList1.length;
      console.log("11122222");
      console.log(state.len);
    });

    return {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 14,
      },
      resetForm,
      checkbox,
      onSubmit,
      formState,
      ...toRefs(state),
      getList,
    };
  },
};
</script>

<style lang="less" scoped></style>
